<template>
  <scroll-page
    :loading="loading"
    :offset="offset"
    :no-data="noData"
    @load="load"
  >
    <article-item
      v-for="article in articles"
      :key="article.id"
      v-bind="article"
    >
    </article-item>
  </scroll-page>
</template>

<script>
import ArticleItem from "@/components/article/Article.vue";
import ScrollPage from "@/components/scrollpage/ScrollPage.vue";
import {getArticles} from '@/api/article'
export default {
  name: "ArticleScrollPage",
  props: {
    query: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  created() {
    this.getArticles();
  },
  data() {
    return {
      loading: false,
      noData: false,
      offset: 0,
      innerPage: {
        pageSize: 5,
        page: 1,
        tagId: null,
        categoryId: null,
      },
      articles: [],
    };
  },
  methods: {
    load() {
      alert("触发分页");
      this.getArticles();
    },
    getArticles() {
      let that = this;
      that.loading = true;
      this.innerPage.tagId = this.query.tagId;
      this.innerPage.categoryId = this.query.categoryId;
      // this.articles = this.articles.concat([
      //   {
      //     id: +new Date(),
      //     weight: 1,
      //     title: "标题1",
      //     commentCounts: 123,
      //     viewCounts: 123,
      //     summary: "概要11",
      //     author: "作者",
      //     tags: [{ tagName: "vue" }],
      //     createDate: "3333",
      //   },
      // ]);
      // this.loading = false;
      getArticles(this.innerPage).then((res) => {
        if(res.data.data){
          if(res.data.data.length <= 0){
            this.noData = true;
          }else{
            this.articles = this.articles.concat(res.data.data);
            this.innerPage.page += 1;
          }
        }else{
          this.$message({type: 'error', message: res.data.message, showClose: true})
        }
      }).catch(() => {
        this.$message({type: 'error', message: '文章加载失败', showClose: true})
      }).finally(function(){
        that.loading = false;
      });
    },
  },
  components: {
    "article-item": ArticleItem,
    "scroll-page": ScrollPage,
  },
};
</script>

<style scoped>
.el-card {
  border-radius: 0;
}

.el-card:not(:first-child) {
  margin-top: 10px;
}
</style>